<template>
    <div class="monitorheader">
        <!-- 地区导航 -->
        <div class="areas"></div>
        
        <!-- 查询参数 -->
        <div class="data-params">
            <h3><span style="color: #79AC78;">{{ area }}</span>参数查询</h3>
            <div class="count">当前表格数据：{{$store.getters.koreaLength}}条</div>
            <div class="time-frame">
                <KoreaBegin></KoreaBegin>
                <KoreaEnd></KoreaEnd>
            </div>
            <div class="domain">
                <span>域名：</span>
                <input type="text" v-model="domain">
            </div>
            <div class="event">
                <span>事件类型: </span>
                <div class="btn" @click="changeEvent('')" :class="{'isactive':$store.state.korea.event === ''}">全部</div>
                <div class="btn" @click="changeEvent('页面访问')" :class="{'isactive':$store.state.korea.event === '页面访问'}">页面访问</div>
                <div class="btn" @click="changeEvent('添加line')" :class="{'isactive':$store.state.korea.event === '添加line'}">添加line</div>
            </div>
            <div class="btn" @click="$store.dispatch('getKoreaData')" :style="{'pointerEvents':$store.state.korea.isloading ? 'none' : 'auto'}">
                <svg v-if="$store.state.korea.isloading" t="1697711946906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4217" id="mx_n_1697711946907" width="128" height="128"><path d="M511.882596 287.998081h-0.361244a31.998984 31.998984 0 0 1-31.659415-31.977309v-0.361244c0-0.104761 0.115598-11.722364 0.115598-63.658399V96.000564a31.998984 31.998984 0 1 1 64.001581 0V192.001129c0 52.586273-0.111986 63.88237-0.119211 64.337537a32.002596 32.002596 0 0 1-31.977309 31.659415zM511.998194 959.99842a31.998984 31.998984 0 0 1-31.998984-31.998984v-96.379871c0-51.610915-0.111986-63.174332-0.115598-63.286318s0-0.242033 0-0.361243a31.998984 31.998984 0 0 1 63.997968-0.314283c0 0.455167 0.11921 11.711527 0.11921 64.034093v96.307622a31.998984 31.998984 0 0 1-32.002596 31.998984zM330.899406 363.021212a31.897836 31.897836 0 0 1-22.866739-9.612699c-0.075861-0.075861-8.207461-8.370021-44.931515-45.094076L195.198137 240.429485a31.998984 31.998984 0 0 1 45.256635-45.253022L308.336112 263.057803c37.182834 37.182834 45.090463 45.253022 45.41197 45.578141A31.998984 31.998984 0 0 1 330.899406 363.021212zM806.137421 838.11473a31.901448 31.901448 0 0 1-22.628318-9.374279L715.624151 760.859111c-36.724054-36.724054-45.018214-44.859267-45.097687-44.93874a31.998984 31.998984 0 0 1 44.77618-45.729864c0.32512 0.317895 8.395308 8.229136 45.578142 45.411969l67.88134 67.88134a31.998984 31.998984 0 0 1-22.624705 54.630914zM224.000113 838.11473a31.901448 31.901448 0 0 0 22.628317-9.374279l67.88134-67.88134c36.724054-36.724054 45.021826-44.859267 45.097688-44.93874a31.998984 31.998984 0 0 0-44.776181-45.729864c-0.32512 0.317895-8.395308 8.229136-45.578142 45.411969l-67.88134 67.884953a31.998984 31.998984 0 0 0 22.628318 54.627301zM255.948523 544.058589h-0.361244c-0.104761 0-11.722364-0.115598-63.658399-0.115598H95.942765a31.998984 31.998984 0 1 1 0-64.00158h95.996952c52.586273 0 63.88237 0.111986 64.337538 0.11921a31.998984 31.998984 0 0 1 31.659414 31.97731v0.361244a32.002596 32.002596 0 0 1-31.988146 31.659414zM767.939492 544.058589a32.002596 32.002596 0 0 1-31.995372-31.666639v-0.361244a31.998984 31.998984 0 0 1 31.659415-31.970085c0.455167 0 11.754876-0.11921 64.34115-0.11921h96.000564a31.998984 31.998984 0 0 1 0 64.00158H831.944685c-51.936034 0-63.553638 0.111986-63.665624 0.115598h-0.335957zM692.999446 363.0176a31.998984 31.998984 0 0 1-22.863126-54.381656c0.317895-0.32512 8.229136-8.395308 45.41197-45.578141l67.88134-67.884953A31.998984 31.998984 0 1 1 828.693489 240.429485l-67.892177 67.88134c-31.020013 31.023625-41.644196 41.759794-44.241539 44.393262l-0.697201 0.722488a31.908673 31.908673 0 0 1-22.863126 9.591025z" fill="" p-id="4218"></path></svg>
                <span v-else>查询</span>
            </div>
        </div>

        <!-- 数据总览 -->
        <div class="data-screen">
            <h3><span style="color: #79AC78;">{{ area }}</span>数据总览</h3>
            <div class="today-line">今日<span style="color: #79AC78;">{{ area }}</span>总line量：{{ $store.state.datascreen.korea.todayline }}</div>
            <div class="today-page">今日<span style="color: #79AC78;">{{ area }}</span>总访问量：{{ $store.state.datascreen.korea.todaypage }}</div>
            <div class="yesterday-line">昨日<span style="color: #79AC78;">{{ area }}</span>总line量：{{ $store.state.datascreen.korea.yesterdayline }}</div>
            <div class="yesterday-page">昨日<span style="color: #79AC78;">{{ area }}</span>总访问量：{{ $store.state.datascreen.korea.yesterdaypage }}</div>
            <div class="seven-line">本周<span style="color: #79AC78;">{{ area }}</span>总line量：{{ $store.state.datascreen.korea.weekline }}</div>
            <div class="seven-page">本周<span style="color: #79AC78;">{{ area }}</span>总访问量：{{ $store.state.datascreen.korea.weekpage }}</div>
        </div>
    </div>
</template>

<script>
import KoreaBegin from '@/components/korea/KoreaBegin.vue'
import KoreaEnd from '@/components/korea/KoreaEnd.vue'


export default {
    data(){
        return{
            area:'韩国'  
        }
    },
    components:{
        KoreaBegin,
        KoreaEnd
    },
    methods:{
        // 事件参数
        changeEvent(param){
            this.$store.commit('GETKOREAEVENT',param)
        },
    },
    computed:{
        domain: {
            get() {
                return this.$store.state.korea.domain;
            },
            set(value) {
                this.$store.commit('UPDATEKOREADOMAIN', value);
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .monitorheader{
        width: 100%;
        min-width: 520px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        // 地区选择
        .areas{
            width: 100%;
            height: 60px;
            background-color: #F5f5f5;
            border-radius: 4px;
            border: solid 1px #ddd;
            display: flex;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            .area{
                color: #222;
                flex-grow: 1;
                line-height: 60px;
                text-align: center;
                cursor: pointer;
                font-size: 19px;
            }
            .isactive{
                background-color: #79AC78;
                color: #fff;
            }
        }

        // 参数选择
        .data-params{
            width: 100%;
            margin-top: 20px;
            background-color: #f5f5f5;
            border-radius: 4px;
            padding: 10px;
            border: solid #ddd 1px;

            h3{
                width: 100%;
                text-align: center;
                line-height: 60px;
            }
            .count{
                width: 100%;
                height: 40px;
                line-height: 40px;
                border: solid 1px #ddd;
                border-radius: 4px;
                margin-bottom: 10px;
                padding-left: 10px;
            }
            .time-frame{
                display: flex;
                justify-content: space-between;
            }

            .domain{
                width: 100%;
                height: 40px;
                border: solid 1px #ddd;
                line-height: 40px;
                border-radius: 4px;
                padding-left: 10px;
                margin-top: 10px;
                display: flex;
                user-select: none;
                &>span{
                    padding-right: 30px;
                    border-right: solid 1px #ddd;
                }
                &>input{
                    flex-grow: 1;
                    border: none;
                    font-size: 20px;
                    padding: 0 10px;
                    outline: none;
                    color: #454545;

                    &:focus{
                        border: solid 1px #ddd;
                    }
                }
            }

            .event{
                width: 100%;
                height: 40px;
                margin-top: 10px;
                line-height: 40px;
                display: flex;
                border: solid 1px #ddd;
                padding-left: 10px;
                user-select: none;
                border-radius: 4px;
                span{
                    margin-right: 10px;
                }
                .btn{
                    flex-grow: 1;
                    text-align: center;
                    cursor: pointer;
                }
                .isactive{
                    background-color: #79AC78;
                    color: #fff;
                }
            }

            &>.btn{
                width: 100%;
                height: 40px;
                line-height: 38px;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                border: solid 1px #ddd;
                margin-top: 10px;
                border-radius: 4px;
                cursor: pointer;
                user-select: none;
                background-color: #79AC78;
                color: #fff;

                &>svg{
                    width: 25px;
                    height: 25px;
                    fill: #fff;
                    animation: loading 2.5s linear infinite;
                }
            }
        }

        // 数据总览
        .data-screen{
            width: 100%;
            background-color: #f5f5f5;
            padding: 10px;
            margin-top: 20px;
            border: solid #ddd 1px;

            h3{
                width: 100%;
                text-align: center;
                line-height: 50px;
            }

            .today-page{
                width: 100%;
                height: 36px;
                border: solid 1px #ddd;
                line-height: 38px;
                padding-left: 10px;
                margin-top: 10px;
            }

            .today-line{
                width: 100%;
                height: 36px;
                border: solid 1px #ddd;
                line-height: 38px;
                padding-left: 10px;
            }
            .yesterday-page{
                width: 100%;
                height: 36px;
                border: solid 1px #ddd;
                line-height: 38px;
                padding-left: 10px;
                margin-top: 10px;
            }
            .yesterday-line{
                width: 100%;
                height: 36px;
                border: solid 1px #ddd;
                line-height: 38px;
                padding-left: 10px;
                margin-top: 20px;
            }
            .seven-page{
                width: 100%;
                height: 36px;
                border: solid 1px #ddd;
                line-height: 38px;
                padding-left: 10px;
                margin-top: 10px;
            }
            .seven-line{
                width: 100%;
                height: 36px;
                border: solid 1px #ddd;
                line-height: 38px;
                padding-left: 10px;
                margin-top: 20px;
            }
        }
    }
    
    @keyframes loading {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
    }
</style>